
<template >
	<div id="populationUpdate">
		<el-dialog width="80%" :title="title" center :visible.sync="visible" :closeOnClickModal="false">
			<div>
				<el-form label-width="120px" style="overflow-y: scroll; height: 60vh; padding-right: 20px">
					<el-form-item label="姓名">
						<div>{{ inputModel.master_name }}</div>
					</el-form-item>
					<el-form-item label="户口簿号">
						<div>{{ inputModel.resident_num }}</div>
					</el-form-item>
					<el-form-item label="户口性质">
						<div>{{ inputModel.resident_type }}</div>
					</el-form-item>
					<el-form-item label="省市县" :required="false">
						<div>{{ inputModel.province_name }}{{ inputModel.city_name }}{{ inputModel.county_name }}</div>
					</el-form-item>
					<el-form-item label="社区">
						<div>{{ inputModel.community_name }}</div>
					</el-form-item>
					<el-form-item label="网格">
						<div>{{ inputModel.grid_name }}</div>
					</el-form-item>
					<el-form-item label="微网格">
						<div>{{ inputModel.second_grid_name }}</div>
					</el-form-item>
					<el-form-item label="户籍具体地址">
						<div>{{ inputModel.address }}</div>
					</el-form-item>
					<div>
						<div class="title">家庭成员</div>
						<el-form-item label="" :label-width="labelWidth" :required="false">
							<!-- 家庭成员列表 -->
							<div id="addContract">
								<div class="addContract-block" style="width: 100%">
									<div class="meTableHead flex-alignCenter flex-between">
										<div></div>
										<div class="flex-row"></div>
									</div>
									<el-table :data="inputModel.user_list" style="width: 100%" border>
										<el-table-column align="center" prop="name" label="姓名">
										</el-table-column>
										<el-table-column align="center" prop="id_card" label="身份证号码">
											 <template slot-scope="scope">
												 <div class="flex-row flex-alignCenter">
													{{scope.row.id_card.replace(/^(.{2})(?:\w+)(.{2})$/, "\$1*********\$2")}}
												</div>
											</template>
										</el-table-column>
										<el-table-column align="center" prop="tel" label="联系方式">
										</el-table-column>
										<el-table-column align="center" prop="ref" label="与户主关系">
										</el-table-column>
									</el-table>
								</div>
							</div>
							<!-- 村管理员列表end -->
						</el-form-item>
					</div>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<!-- <el-button size="medium" type="danger" @click="handleSubmit(3)">
          拒 绝
        </el-button>
        <el-button size="medium" type="primary" @click="handleSubmit(1)" :loading="loading">
          通 过
        </el-button> -->
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	components: {},
	props: {
		title: {
			type: String,
			default: '新增',
		},
		op_type: {
			default: 1,
		},
	},
	data() {
		return {
			loaction: 'home',
			activeName: '个人信息',
			dialogVisible: false,
			labelWidth: '100px',
			visible: false,
			loading: false,
			options: null,
			urlList: [],
			villageList: [],
			townList: [],
			nation_list: [
				{ id: 1, name: '汉族' },
				{ id: 2, name: '蒙古族' },
				{ id: 3, name: '回族' },
				{ id: 4, name: '藏族' },
				{ id: 5, name: '维吾尔族' },
				{ id: 6, name: '苗族' },
				{ id: 7, name: '彝族' },
				{ id: 8, name: '壮族' },
				{ id: 9, name: '布依族' },
				{ id: 10, name: '朝鲜族' },
				{ id: 11, name: '满族' },
				{ id: 12, name: '侗族' },
				{ id: 13, name: '瑶族' },
				{ id: 14, name: '白族' },
				{ id: 15, name: '土家族' },
				{ id: 16, name: '哈尼族' },
				{ id: 17, name: '哈萨克族' },
				{ id: 18, name: '傣族' },
				{ id: 19, name: '黎族' },
				{ id: 20, name: '傈僳族' },
				{ id: 21, name: '佤族' },
				{ id: 22, name: '畲族' },
				{ id: 23, name: '高山族' },
				{ id: 24, name: '拉祜族' },
				{ id: 25, name: '水族' },
				{ id: 26, name: '东乡族' },
				{ id: 27, name: '纳西族' },
				{ id: 28, name: '景颇族' },
				{ id: 29, name: '柯尔克孜族' },
				{ id: 30, name: '土族' },
				{ id: 31, name: '达翰尔族' },
				{ id: 32, name: '么佬族' },
				{ id: 33, name: '羌族' },
				{ id: 34, name: '布朗族' },
				{ id: 35, name: '撒拉族' },
				{ id: 36, name: '毛南族' },
				{ id: 37, name: '仡佬族' },
				{ id: 38, name: '锡伯族' },
				{ id: 39, name: '阿昌族' },
				{ id: 40, name: '普米族' },
				{ id: 41, name: '塔吉克族' },
				{ id: 42, name: '怒族' },
				{ id: 43, name: '乌孜别克族' },
				{ id: 44, name: '俄罗斯族' },
				{ id: 45, name: '鄂温克族' },
				{ id: 46, name: '德昂族' },
				{ id: 47, name: '保安族' },
				{ id: 48, name: '裕固族' },
				{ id: 49, name: '京族' },
				{ id: 50, name: '塔塔尔族' },
				{ id: 51, name: '独龙族' },
				{ id: 52, name: '鄂伦春族' },
				{ id: 53, name: '赫哲族' },
				{ id: 54, name: '门巴族' },
				{ id: 55, name: '珞巴族' },
				{ id: 56, name: '基诺族' },
			],
			sex_list: ['男', '女'],
			military_list: ['未服兵役', '已服兵役'], // 兵役情况
			politics_list: [
				'中共党员',
				'中共预备党员',
				'共青团员',
				'民革党员',
				'民盟盟员',
				'民建会员',
				'民进会员',
				'农工党党员',
				'致公党党员',
				'九三学社社员',
				'台盟盟员',
				'无党派人士',
				'群众',
			], // 政治面貌
			external_list: ['不是', '是'],
			transient_cert_list: ['不需要', '有', '没有'],
			ref_list: [
				'户主',
				'妻',
				'夫',
				'子',
				'女',
				'父',
				'母',
				'岳父',
				'岳母',
				'孙子',
				'孙女',
				'外孙子',
				'外孙女',
				'其他',
			],
			import_person_list: [
				'低保人员',
				'五保人员',
				'留守儿童',
				'空巢老人',
				'残疾人员',
				'寓外人员',
				'其他人员',
			], // 重点人群
			special_list: [
				'归正人员',
				'矫正人员',
				'邪教人员',
				'非访人员',
				'吸毒人员',
			], // 特殊人群
			resident_type_list: ['农业户口', '城镇户口'], // 户口性质
			is_cancel_list: ['未注销', '已注销'], // 注销情况
			is_master_list: ['是', '不是'], // 是否户主
			same_address_list: ['是', '不是'], // 人户同址
			health_list: [
				'健康',
				'一般（长病）',
				'一般残疾',
				'重度残疾',
				'其它',
			], // 健康状况
			deformed_list: [
				'无',
				'视力残疾',
				'听力残疾',
				'言语残疾',
				'肢体残疾',
				'智力残疾',
				'精神残疾',
				'多重残疾',
				'其他残疾',
			], // 残疾类型
			lower_protect_list: [
				'无',
				'收入型低保',
				'支出型低保',
				'残疾人单列户施保',
				'重病型单列户施保致贫原因',
			], // 低保类型
			labour_ability_list: [
				'正常',
				'有劳动能力',
				'部分丧失劳动能力',
				'完全丧失劳动能力',
				'无劳动能力',
			], // 劳动能力
			nurse_level_list: [
				'正常',
				'全自理',
				'部分不能自理',
				'基本不能自理',
				'生活完全不能自理',
			], // 护理等级
			poor_reason_list: [
				'无',
				'疾病',
				'灾害',
				'失业',
				'失地',
				'因学致贫',
				'火灾',
				'交通事故',
				'突发意外事件',
				'其他',
			], // 致贫原因
			job_status_list: [
				'在职职工',
				'灵活就业',
				'登记失业',
				'未登记失业',
				'老年人（60周岁及以上）',
				'在校生（18周岁以上）',
				'在校生（18周岁以下）',
				'其他（18周岁以下）',
			], //职业状态
			inputModel: {
				birthday: '',
				name: '', // 姓名
				sex: '男', // 性别
				nation: '汉族', // 民族
				id_card: '', // 身份证
				// 出生年月
				community: '', // 社区是ID
				grid: '', // 微网格ID
				military: '未服兵役', // 兵役情况 1、未服兵役 2、已服兵役
				politics: '群众', // 政治面貌 1、中共党员 2、中共预备党员 3、共青团员 4、民革党员 5、民盟盟员 6、民建会员 7、民进会员 8、农工党党员 9、致公党党员 10、九三学社社员 11、台盟盟员 12、无党派人士 13、群众
				village: '', // 村庄
				address: '', // 现居地址
				external: '不是', // 是否是外来人口 1、不是 2、是
				transient_cert: '不需要', // 暂住证 1、不需要 2、有 3、没有
				live_cert: '', // 居住证号
				import_person: '其他人员', // 重点人群 1、低保人员 2、五保人员 3、留守儿童 4、空巢老人 5、残疾人员 6、寓外人员 7、其他人员
				special: '', // 特殊人群 1、归正人员 2、矫正人员 3、邪教人员 4、非访人员 5、吸毒人员
				resident_num: '', // 户口薄号
				resident_type: '农业户口', // 户口性质 1、农业户口 2、城镇户口
				resident_address: '', // 户籍地址
				is_cancel: '未注销', // 注销情况 1、未注销 2、已注销
				is_master: '是', // 是否户主 1、是 2、不是
				same_address: '是', // 人户同址 1、是 2、不是
				village_group: '', // 村民小组
				// 婚姻情况家庭成员

				// 家庭情况姓名
				// 家庭情况身份证
				// 家庭情况联系方式
				// 家庭情况与户主的关系
				user_list: [],
				income: '', // 家庭情况户年收入
				labour: '', // 家庭情况劳动力人数
				egress: '', // 家庭情况外出人数
				honor: '', // 家庭情况家庭荣誉
				nature: '', // 家庭情况家庭性质
				type: '', // 家庭情况家庭类型
				police_station: '', // 家庭情况派出所
				health: '健康', // 健康状况 1、健康 2、一般（长病） 3、一般残疾 4、重度残疾 5、其它
				deformed: '无', // 残疾类型 1、无 2、视力残疾 3、听力残疾 4、言语残疾 5、肢体残疾 6、智力残疾 7、精神残疾 8、多重残疾 9、其他残疾
				lower_protect: '无', // 低保类型 1、无 2、收入型低保 3、支出型低保 4、残疾人单列户施保 5、重病型单列户施保致贫原因
				labour_ability: '正常', // 劳动能力 1、正常 2、有劳动能力 3、部分丧失劳动能力 4、完全丧失劳动能力 5、无劳动能力
				nurse_level: '正常', // 护理等级 1、正常 2、全自理 3、部分不能自理 4、基本不能自理 5、生活完全不能自理
				poor_reason: '无', // 致贫原因 1、无 2、疾病 3、灾害 4、失业 5、失地 6、因学致贫 7、火灾 8、交通事故 9、突发意外事件 10、其他
				job_status: '', // 职业状态 1、在职职工 2、灵活就业 3、登记失业 4、未登记失业 5、老年人（60周岁及以上） 6、在校生（18周岁以上） 7、在校生（18周岁以下） 8、其他（18周岁以下）
				job_region: '', // 工作区域
				job_area: '', // 工作地区
				job: '', // 职务
				social_insurance: '', // 社保信息
				info: {}, //户口信息
			},
			oldInputModel: {},
			userList: window.localStorage.getItem('userList')
				? JSON.parse(window.localStorage.getItem('userList'))
				: {},
			loginNameDisable: false,
			numberDetail: {}, //数字门牌信息
			community_list: [],
			grid_list: [],
			second_grid_list: [],
			resident_list: [],
		};
	},
	// 判断是否需要刷新页面
	// watch: {
	//   $route(to, from) {
	//     if (this.thisRoutePath == to.path) {
	//       dropdown.getRole().then(result => {
	//         this.roleList = result.content;
	//       });
	//     }
	//   },
	// },
	mounted() {
		// this.getAllBaseStructure_baseStructure();
	},
	methods: {
		/**
		 * 点击新增
		 */
		handelAdd2: function () {
			this.$refs.CompOpenAccount.show();
		},
		AddCompOpenAccountRefresh(e) {
			console.log(e);
			var item = e;
			this.inputModel.info.resident_num = item.resident_num;
			this.inputModel.info.resident_type = item.resident_type;
			this.inputModel.info.address = item.address;
			this.inputModel.community = item.community;
			this.grid_list_grid();
			this.inputModel.grid = item.grid;
			this.second_grid_list_grid();
			this.inputModel.second_grid = item.second_grid;

			this.inputModel.resident_id = item.id;
			console.log(this.inputModel);
		},
		//迁入
		saveFn(val) {
			var params = this.cloneObjectFn(val);
			params.resident_id = this.inputModel.resident_id;
			params.op_type = 2; // 1、注销 2、迁入 3、迁出 4、变更 5、立户
			console.log(params);
			this.$myApi.save_residentUser(params).then((res) => {
				if (res.code == 200) {
					this.$message.success('新增家庭成员成功');
					this.getDetail_residentUser(this.inputModel.id);
				}
			});
		},
		showAddFamily: function () {
			this.$refs.addFamily.show();
			setTimeout(() => {
				this.$refs.addFamily.initData({
					inputModel: this.inputModel,
				});
			}, 0);
		},
		getAllBaseStructure_baseStructure(pageNum) {
			this.$myApi
				.getAllBaseStructure_baseStructure(this.searchList)
				.then((res) => {
					if (res.code == 200) {
						var townList = this.cloneObjectFn(res.data);

						this.townList = townList; //因为只有一个县直接取第一个
						var villageList = this.cloneObjectFn(res.data);
						villageList.forEach((element) => {
							element.children.forEach((element2) => {
								element2.children.forEach((element3) => {
									villageList.push(element3);
								});
							});
						});
						this.villageList = villageList;
					}
				});
		},
		resident_numChange() {
			var resident_num = this.inputModel.info.resident_num;
			this.resident_list.map((item) => {
				if (item.resident_num == resident_num) {
					this.inputModel.info.resident_type = item.resident_type;
					this.inputModel.info.address = item.address;
					this.inputModel.community = item.community;
					this.grid_list_grid();
					this.inputModel.grid = item.grid;
					this.second_grid_list_grid();
					this.inputModel.second_grid = item.second_grid;
					this.inputModel.resident_id = item.id;
				}
			});
		},
		handleClick(tab, event) {
			console.log(tab, event);
		},
		closeDialog() {
			this.dialogVisible2 = false;
		},
		mulitpleUpload(index) {
			this.mulitpleUploadIndex = index;
			this.dialogVisible2 = true;
		},
		del(name, index) {
			console.log(name, index);
			this.$confirm('是否确认删除所选数据, 删除后不可恢复', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then((e) => {
					this.inputModel[name].splice(index, 1);
				})
				.catch((e) => {
					console.log(this, e);
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
		},
		//注销
		logout: function () {
			const params = this.cloneObjectFn(this.inputModel);
			delete params.info;
			delete params.user_list;
			params.op_type = 1;
			this.$myApi.save_residentUser(params).then((res) => {
				if (res.code == 200) {
					this.$message.success('注销成功');
					this.getDetail_residentUser(this.inputModel.id);
				}
			});
		},
		//迁出
		rollOut: function () {
			this.$prompt('请输入迁出备注', '迁出提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then(({ value }) => {
				const params = this.cloneObjectFn(this.inputModel);
				delete params.info;
				delete params.user_list;
				params.op_type = 3;
				params.remark = value;
				this.$myApi.save_residentUser(params).then((res) => {
					if (res.code == 200) {
						this.$message.success('迁出成功');
						this.getDetail_residentUser(this.inputModel.id);
					}
				});
			});
		},
		//增加数组对象
		addList(name) {
			var arr = this.inputModel[name];
			console.log('addList', name, arr);

			arr.push({
				guid: this.guid(),
				resident_id: this.inputModel.resident_id,
				community: this.inputModel.community,
				grid: this.inputModel.grid,
			});
		},
		handleChange(value) {
			console.log(value);
			this.inputModel.town_id = value[1];
		},
		handleRemove(file) {
			console.log(file);
			this.urlList.map((item, index) => {
				if (file.uid == item.uid) {
					this.urlList.splice(index, 1);
				}
			});
			this.inputModel.url = '';
			this.inputModel.sha1 = '';
		},
		handleAdd(fileList) {
			console.log(11, fileList);
			fileList[0].response.data[0].name =
				fileList[0].response.data[0].file_name;
			this.urlList = [fileList[0].response.data[0]];
			this.inputModel.url = fileList[0].response.data[0].url;
			this.inputModel.sha1 = fileList[0].response.data[0].sha1;
		},
		closeDialog() {
			this.dialogVisible = false;
		},
		/**
		 * 清空数据
		 */
		clearData: function () {
			Object.assign(
				this.$data.inputModel,
				this.$options.data().inputModel
			); //用原始data里的对象替代现有对象
		},
		/**
		 * 初始化数据
		 */
		initData: function ({ inputModel }) {
			console.log(inputModel);
			this.getDetail_residentUser(inputModel.id); //当前数据
		},
		//查看修改前数据
		getResidentUser_residentUser(id) {
			this.$myApi.getResidentUser_residentUser(id).then((res) => {
				if (res.code == 200) {
					var arr = {};
					Object.keys(res.data).forEach((key) => {
						Object.keys(this.inputModel).forEach((key2) => {
							if (
								key == key2 &&
								res.data[key] != this.inputModel[key2]
							) {
								console.log(
									444,
									res.data[key],
									this.inputModel[key2]
								);
								arr[key] = res.data[key]; //查找相同键名 并保存有改动的
							}
						});
					});
					this.oldInputModel = arr;
				}
			});
		},
		//当前数据
		getDetail_residentUser(id) {
			this.$myApi.getDetailById_residentInfo2(id).then((res) => {
				if (res.code == 200) {
					this.inputModel = res.data;
					// this.transformIdentityCard(this.inputModel.id_card);
					// this.grid_list_grid();
					// this.second_grid_list_grid();
				}
			});
		},
		//根据户口簿号获取数字门牌详情
		getDetailByResidentNum_residentUser(id) {
			this.$myApi.getDetailByResidentNum_residentUser(id).then((res) => {
				if (res.code == 200) {
					this.numberDetail = res.data;
				}
			});
		},
		//户口列表
		listPage_residentInfo() {
			var searchList = {
				current: 1,
				size: 9999,
				resident_num: 1,
			};
			this.$myApi.listPage_residentInfo(searchList).then((res) => {
				if (res.code == 200) {
					this.resident_list = res.data.records;
				}
			});
		},
		//社区列表
		listByPid_grid() {
			this.$myApi.listByPid_grid({ pid: 1 }).then((res) => {
				if (res.code == 200) {
					this.community_list = res.data;
				}
			});
		},
		//网格列表
		grid_list_grid(pid) {
			this.$myApi
				.listByPid_grid({ pid: this.inputModel.community })
				.then((res) => {
					if (res.code == 200) {
						this.grid_list = res.data;
					}
				});
		},
		//微网格列表
		second_grid_list_grid(pid) {
			this.$myApi
				.listByPid_grid({ pid: this.inputModel.grid })
				.then((res) => {
					if (res.code == 200) {
						this.second_grid_list = res.data;
					}
				});
		},
		show: function (type, id) {
			// this.listPage_residentInfo();
			// this.listByPid_grid();
			this.visible = true;
			this.clearData();
			this.$emit('hide');
			this.inputModel.type = type;
			this.inputModel.parent_id = id;
		},
		/**
		 * 关闭弹出框
		 */
		hide: function () {
			this.clearData();
			this.visible = false;
		},
		/**
		 * 处理提交
		 */
		handleSubmit: function (status) {
			var params = this.cloneObjectFn(this.inputModel);
			params.status = status;
			delete params.info;
			delete params.user_list;
			this.$emit('confirm', {
				inputModel: params,
			});
		},
		id_cardChange(e) {
			var idcardReg =
				/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
			if (!idcardReg.test(this.inputModel.id_card)) {
				this.$message.error('请补充正确身份证');
				this.$refs.id_card.focus();
				this.inputModel.birthday = '';
				return;
			} else {
				this.transformIdentityCard(this.inputModel.id_card);
			}
		},
		transformIdentityCard(value) {
			var birthday;
			// sex 0未知  1男  2女
			if (value.length === 15) {
				birthday = `19${value.substr(6, 2)}-${value.substr(
					8,
					2
				)}-${value.substr(10, 2)}`;
				// sex = value.substr(14, 1) % 2 || 2;
			}
			if (value.length === 18) {
				birthday = `${value.substr(6, 4)}-${value.substr(
					10,
					2
				)}-${value.substr(12, 2)}`;
				// sex = value.substr(16, 1) % 2 || 2;
			}
			this.inputModel.birthday = birthday;
			console.log(birthday);
		},
	},
};
</script>
<style scoped>
.title {
	font-weight: bold;
	margin: 10px;
}
</style>
<style >
#populationUpdate .el-input__inner {
	max-width: 222px;
}
</style>